<template>
  <div class="weather-wrapper" :style="wrapperStyle" v-loading="loadingRef">
    <div :class="`head ${platformRef === 'darwin' ? 'start':platformRef === 'win32'?'end':''}`">
      <div class="close" @click="handleCloseWin">
        <el-icon><Close /></el-icon>
      </div>
    </div>
    <div class="weather-content">
      <div class="address" v-if="addressRef">
        {{ addressRef.province }} - {{ addressRef.city }}
        <el-icon style="margin-inline-start: 4px"
          ><LocationInformation
        /></el-icon>
      </div>
      <Banner
        v-if="weatherRef && weatherRef.forecastDay"
        :source="weatherRef.forecastDay"
      />
      <div class="weather-other">
        <Chart
          v-if="weatherRef && weatherRef.forecastDay"
          :source="weatherRef.forecastDay"
        />
        <div
          v-for="(item, index) in rests.list"
          :key="index"
          :style="{ gridArea: item.gridArea }"
        >
          <Rests :data="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive , inject} from 'vue';
import { LocationInformation,Close } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import moment from 'moment';
// 工具方法
import useSymbols from '../../compostions/useSymbols';
import hexToRgb from '../../util/hexToRgb';
// 组件
import Banner from './Banner.vue';
import Chart from './Chart.vue';
import Rests from './Rests.vue';
// api
import {
  getWeatherByCityIdApi,
  getIndexDetailApi,
} from '../../apis/weatherApi.js';
import { iconArr, levelIcon } from '../../util/baseIcon.js';

const { systemColorReadonly } = inject(useSymbols);
const [r, g, b] = hexToRgb(systemColorReadonly.value.color);
const wrapperStyle = {
  background: `linear-gradient(
    to bottom,
    rgba(${r},${g},${b},0.4),
    rgba(${r},${g},${b},0.7)
  )`
}

const route = useRoute();

const platformRef = ref();
const loadingRef = ref(false);
const addressRef = ref();
const logRef = ref();
const weatherRef = ref();
const rests = reactive({
  list: [],
});

// 获取当前定位区域的天气
const getWeatherInfo = async () => {
  const cityId = route.query.cityId;
  const { data } = await getWeatherByCityIdApi(cityId);
  const { forecastDays, condition } = data;
  weatherRef.value = {
    forecastDay: forecastDays.forecastDay.map((item) => {
      const dayTemp = item.predictDate * 1000;
      return {
        ...item,
        icon: new URL(
          `../../assets/imgs/weather/W${item.iconDay}.png`,
          import.meta.url
        ).href,
        date: moment(dayTemp).format('MM/DD'),
      };
    }),
    condition,
  };
};

const getDetail = async () => {
  const cityId = route.query.cityId;
  const gridAreaArr = ['b', 'c', 'd', 'e'];
  const { data } = await getIndexDetailApi(cityId);
  const list = data.indexs.filter((el) => {
    return ['运动指数', '空气污染扩散指数', '紫外线指数', '感冒指数'].includes(
      el.indexType
    );
  });
  rests.list = list.map((item, index) => {
    const res = iconArr.find((el) => item.indexType === el.prop);
    item.icon = res.icon;
    item.gridArea = gridAreaArr[index];
    return item;
  });
};
// 桌面端环境下自定义关闭按钮
const handleCloseWin=()=>{
  window.mySubApi.closeWin();
}
onMounted(async () => {
  document.title = '未来15天预报';
  addressRef.value = route.query;
  loadingRef.value = true;
  platformRef.value = route.query.platform;
  await getWeatherInfo();
  await getDetail();
  loadingRef.value = false;

  const wrapperDom = document.querySelector('.weather-wrapper');
  if (wrapperDom) {
    wrapperDom.style.setProperty('--bg-after-color', `rgba(${r},${g},${b},0.09)`);
    wrapperDom.style.setProperty('--bg-before-color', `rgba(${r},${g},${b},0.1)`);
  }
});
</script>
<style scoped lang="less">
.weather-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  &:after {
    position: absolute;
    bottom: -100px;
    left: 0;
    z-index: -1;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background-color: var(--bg-after-color);
    content: '';
    animation: ballAnimation1 8s infinite;
  }

  &:before {
    position: absolute;
    bottom: -200px;
    left: 300px;
    z-index: 0;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background-color: var(--bg-before-color);
    content: '';
    animation: ballAnimation2 8s 4s infinite;
  }
  .head{
    height: 30px;
    width: 100%;
    -webkit-app-region: drag;
    // opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
  }
  .start{
      display: flex;
      justify-content: start;
      .close{
      -webkit-app-region: no-drag;
      background-color: #FB5E57;
      width: 11px;
      height: 11px;
      font-size: 9px;
      color:#FB5E57;
      border: 1px solid #d44c45;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 6px;
      &:hover{
        color: #720000;
      }
    }
    }
    .end{
      display: flex;
      justify-content: end;
    }
  .weather-content {
    position: relative;
    max-width: 900px;
    min-width: auto;
    height: 100%;
    overflow-y: auto;
    margin: 0 auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .address {
      position: absolute;
      right: 0;
      top: 20px;
      padding-right: 12px;
      font-size: 13px;
      font-weight: 400;
      color: #fff;
      text-shadow: 0 0 3px #999;
      display: flex;
      align-items: center;
    }
    .weather-other {
      margin-top: 20px;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 110px 110px;
      grid-column-gap: 14px;
      grid-row-gap: 14px;
      grid-template-areas:
        'a a b c'
        'a a d e';
    }
  }
}
@keyframes ballAnimation1{
  0%{
    transform: translate(0,0);
  }
  50%{
      transform: scale(1.2);
  }
    100%{
      transform: translate(0,0);
  }
}
@keyframes ballAnimation2{
  0%{
    transform: translate(0,0) scale(1);
  }
  50%{
    transform: translate(80px,-30px) scale(1.2);
  }
  100%{
    transform: translate(0,0) scale(1);
  }
}
</style>
